<template>
	<div class="comming">
		<div class="top">近期最受期待</div>
		<div class="commingfather">
			<!--每一小块的详细内容-->
			<div class="commingbox">

				<swiper :options="swiperOption" ref='getMorecoming'>
					<swiper-slide v-for=" (comings,index) in comming" :key='index'>
						<div class="commingboxmiddle"><img v-lazy="pixF(comings.img)" /></div>
						<div class="commingboxnm">{{comings.nm}}</div>
						<div class="comingTitle">{{comings.comingTitle}}</div>
					</swiper-slide>

				</swiper>

			</div>
		</div>

		<div class="BG"></div>
		<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">

			<li v-for="(listItem,index) in List" :key="listItem.id">
				<div class="listTop" v-show="Show(listItem.comingTitle,index)">{{listItem.comingTitle}}</div>
				<div class="middle-left block">
					<img v-lazy="pictur (listItem.img)" />
				</div>
				<div class="Border">
					<div class="middle block">
						<div class="middle-top">
							<span>{{listItem.nm}}</span>
						</div>
						<div class="wish"><i>{{listItem.wish}}</i>人想看</div>
						<!--<div class="dianpin" v-if="movies.sc==0" >暂无评分：</div>-->
						<!--<div class="dianpin">观众评分：<i>{{movies.sc}}</i></div>-->
						<div class="star">主演：{{listItem.star}}</div>
						<div class="showInfo">{{listItem.showInfo}}</div>
					</div>

					<div class="middle-right block yushou" v-if="listItem.showInfo&&listItem.preShow==false">预售</div>
					<div class="middle-right block goupiao" v-else="listItem.preShow==false">想看</div>
					<div class="cliearfix"></div>
				</div>
			</li>
		</ul>

	</div>
</template>
<style lang="scss" scoped>
	img[lazy=loading]{
		width: 50px;
		height: 50px;
		margin: auto;
	}
</style>

<script>
	import '../scss/comming.scss'

	import qs from 'qs'
	export default {
		data() {
			return {
				//近期期待的电影数据
				comming: [],
				//日期分类的数据
				List: [],
				offset:0,
				i: 10,
				j: 20,
				ListId: [],
				loading: true,
				swiperOption: {

					slidesPerView: 'auto',
					coverflowEffect: {

					}
				}

			}
		},
		created() {
			//初始化最受期待的电影
			this.getMost(this.offset);
			//初始化同天上映的电影
			this.axios.get('/ajax/comingList', {
				params: {
					ci: 20,
					token: "",
					limit: 10
				}
			}).then((res) => {

				this.ListId = res.data.movieIds;
				console.log("reslist```````", this.ListId)
				this.List = res.data.coming
				console.log("list```````", this.List)
				this.loading = false;
			});
				//最期待电影到达左边刷新
					this.$nextTick(() => {
						this.$refs.getMorecoming.$on('reachEnd', () => {
							console.log("到左边了")
							this.offset += 10;
//							console.log(this.offset)
							this.getMost(this.offset);
						})
					})

		},
		methods: {
			//期待的资源图片
			pixF(url) {
				if(typeof url == 'string') {
					return url.replace('w.h', '128.180')
				}
			},
			getMost(offset) {
				//最受期待电影的数据
				this.axios.get("/ajax/mostExpected", {
					params: {
						ci: 20,
						limit: 10,
						offset:offset,
						token: "",
					}
				}).then((res) => {
					console.log("offset", this.offset)
						console.log("res",res)
					this.comming = this.comming.concat(res.data.coming) 
					console.log("coming", this.comming)

				

				})
			},
			//日期分类的图片
			pictur(url) {
				if(typeof url == 'string') {
					return url.replace('w.h', '128.180')
				}
			},
			//同一天上映的下拉刷新
			loadMore() {
				//				this.loading=true;
				console.log("触发底部")

				var ids = [];
				for(this.i; this.i < this.j; this.i++) {
					ids.push(this.ListId[this.i])
				}

				ids = ids.toString();
				//				console.log("拿出的id",ids)
				this.axios.get('/ajax/moreComingList', {
					params: {
						ci: 20,
						token: "",
						limit: 10,
						movieIds: ids
					}
				}).then((res) => {
					console.log('原来', this.List)
					console.log('res', res)
					this.List = this.List.concat(res.data.coming)
					console.log("改完后的List", this.List)

				})

				this.j += 10;

			},
			//将同一个日期的归类
			Show(day, index) {
				if(index == 0) {
					return true;
				}
				if(day == this.List[index - 1].comingTitle) {

					return false;
				} else {
					return true
				}

			}

		},

	}
</script>

<style>

</style>